<template>
  <div>
    <h1>ModuleAView</h1>
    <hr>
    <h2>a - counter: {{ counter }}.</h2>

    mutations:
    <button @click="$store.commit('a/SET_COUNTER', '+')">counter++</button>
    <button @click="$store.commit('a/SET_COUNTER', '-')">counter--</button>
    <br>
    actions:
    <button @click="$store.dispatch('a/addAction', '+')">counter++</button>
    <button @click="$store.dispatch('a/incAction', '-')">counter--</button>
    <br>
    mapMutations:
    <button @click="SET_COUNTER('+')">counter++</button>
    <button @click="SET_COUNTER('-')">counter--</button>
    <br>
    mapActions:
    <button @click="addAction">counter++</button>
    <button @click="incAction">counter--</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'ModuleAView',
  computed: {
    // ...mapState(['counter']) // 全局的 state
    // ...mapState('模块名字', ['状态state']) // 模块的 state
    ...mapState('a', ['counter'])
  },
  methods: {
    ...mapMutations('a', ['SET_COUNTER']),
    ...mapActions('a', ['incAction', 'addAction']),
  }
}
</script>

<style scoped>

</style>